<template>
  <!-- 搜索 -->
  <page-skeleton v-if="!songList.length"></page-skeleton>
  <view class="home-container" :class="{'disable-scroll':isSlide}" v-else>
    <view class="search">
      <uni-icons class="uni-icon" @click="showLeftPop" color="#000" size="24" custom-prefix="iconfont"
        type="icon-caidan"></uni-icons>
      <view @click="gotoSearch()" class="search-content">
        <uni-icons class="uni-icon" type="search"></uni-icons>
        <text class="text">推荐的内容</text>
        <view @click.stop="qrCode()">
          <uni-icons class="uni-icon" type="scan"></uni-icons>
        </view>
      </view>
      <uni-icons class="uni-icon" color="#000" size="24" custom-prefix="iconfont" type="icon-mian"></uni-icons>
      <uni-icons class="uni-icon" color="#000" size="28" custom-prefix="iconfont" type="icon-yuyin_o"></uni-icons>
    </view>
    <swiper circular indicator-color="rgba(255,255,255,0.6)" :indicator-dots="true" autoplay :interval="3000"
      :duration="1000">
      <swiper-item v-for="item in bannerlist" :key="item.bannerId">
        <view class="swiper-item">
          <image class="banner" :src="item.pic" mode="widthFix"></image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 推荐歌单 -->
    <m-card title="推荐歌单">
      <scroll-view class="song-list" scroll-x="true">
        <song-item @click="goToSongDetail(item.id)" :song="item" v-for="item in songList" :key="item.id"></song-item>
      </scroll-view>
    </m-card>
    <!-- 最新音乐 -->
    <m-card title="最新音乐">
      <view class="music-list">
        <music-item @click="gotoPlay(index,item.id)" :music="item" v-for="item,index in musicList" :key="item.id">
        </music-item>
      </view>
    </m-card>
    <!-- 网友推荐 -->
    <m-card title="网友推荐">
      <scroll-view :show-scrollbar="false" class="song-list" scroll-x="true">
        <song-item @click="goToSongDetail(item.id)" :song="item" v-for="item in friendSuggest" :key="item.id">
        </song-item>
      </scroll-view>
    </m-card>
  </view>
  <left-pop @changePop="changePop" ref="pop"></left-pop>
</template>

<script setup>
  import {
    ref
  } from "vue";
  import {
    audio
  } from '@/utils/audio.js'
  import {
    getBanner,
    suggestSongList,
    getNewSongList,
    isUseSong,
    getPlayList
  } from '@/request/api.js'

  const bannerlist = ref([]) // 轮播

  const songList = ref([])

  const musicList = ref([])
  const friendSuggest = ref([])
  Promise.all([getBanner(), suggestSongList(), getNewSongList(), getPlayList()]).then(res => {
    bannerlist.value = res[0].banners
    songList.value = res[1].result
    musicList.value = res[2].result
    console.log(res[3].playlists);
    res[3].playlists.forEach(v => {
      v.picUrl = v.coverImgUrl
    })
    friendSuggest.value = res[3].playlists
  })


  const goToSongDetail = (id) => {
    // 跳转歌单页
    uni.navigateTo({
      url: '/pages/song-detail/song-detail?id=' + id,
    })
  }
  const gotoPlay = async (index, id) => {
    const playData = {}
    playData.index = index
    playData.songDetail = musicList.value
    // 判断歌曲是否可用
    const res = await isUseSong(id)
    if (!res.success) {
      return uni.showModal({
        content: '对不起，该音乐暂无版权',
        title: '提示',
        confirmColor: '#ee6666', //确定字体颜色
        showCancel: false, //没有取消按钮的弹框
        buttonText: '确定',
      })
    }
    let obj = encodeURIComponent(JSON.stringify(playData)).replace(/%/g, '%25')
    uni.navigateTo({
      url: `/pages/play/play?item=${obj}`,
      success() {
        if (!audio.autoplay) {
          audio.autoplay = true
        }
      }
    })
  }
  // 跳转搜索
  const gotoSearch = () => {
    uni.navigateTo({
      url: '/pages/search/search',
    })
  }
  const qrCode = () => {

    console.log('erweima');
  }
  const pop = ref(null)
  const showLeftPop = () => {
    pop.value.open()
  }
  const isSlide = ref(false)
  const changePop = (e) => {
    isSlide.value = e.show
  }
</script>
<script>

</script>
<style lang="less">
  page {
    box-sizing: border-box;
    padding: 0 15rpx;
  }

  swiper {
    margin-top: 15rpx;
    height: 280rpx;
  }

  swiper-item {
    box-sizing: border-box;
    padding: 0 5rpx;
  }

  .banner {
    width: 100%;
    border-radius: 20rpx;
  }

  .song-list {
    white-space: nowrap;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
      display: none;
    }
  }

  .search {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15rpx 0;

    .uni-icons {
      margin: 0 15rpx;
    }

    .search-content {
      margin-right: 15rpx;
      padding: 0 15rpx;
      flex: 1;
      display: flex;
      justify-content: space-between;
      height: 60rpx;
      line-height: 60rpx;
      border: 1px solid transparent;
      border-radius: 30rpx;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #C8D0F7, #EDCCE9);

      .text {
        font-size: 30rpx;
        color: #8287A4;
        flex: 1;
      }
    }
  }

  .home-container {
    &.disable-scroll {
      overflow: hidden;
      position: fixed;
    }
  }
</style>
